<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        使用v-for渲染数组 和 对象
        v-for能够根据data中数据的变化自动刷新视图

        v-for渲染数组
          1. 在标签的属性位置写上v-for="item in arr" item表示数组中的每一项，这个名字可以随意取，arr表示需要遍历的数组
          2. 在标签的属性位置写上v-for="(item, index) in arr" index表示数组项的索引值
        v-for渲染对象
          1. 在标签的属性位置写上v-for="value in obj" value表示对象键的值，这个名字可以随便取，obj表示需要遍历的对象
          2. 在标签的属性位置写上v-for="(value, key, index) in obj" key表示对象的键

          注意，以下两种情况不会触发视图更新
            1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
            2. 使用数组下标的方式去改变数组的时候，也不会触发视图更新

          解决上述问题：
            1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
            2. Array.prototype.splice()

            注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
      -->


      <div v-for = '(item,index) in list' :key = 'index'>
        // :key 需要绑定一个唯一值 绑定key属性可以提升v-for渲染效率
        {{item}} 
        // 假设list是数组 item 是 list数组中的每一项 
        {{index}} // index 是对应项的索引

        // 假设list是一个对象
        // item 是对应项的属性值(value)
        // index 是对应的项的属性名(key)
      </div>


      <h1>v-for="item in arr"</h1>
      <p v-for="item in user" :key="item.name">{{item.name}}:{{item.age}}</p>

      <h1>v-for="(item, index) in arr"</h1>
      <p v-for="(item, index) in user" :key="index">{{item.name}}:{{item.age}}索引：{{index}}</p>

      <h1>v-for="value in obj"</h1>
      <p v-for="value in boss" :key="value">{{value}}</p>

      <h1>v-for="(value, key, index) in obj"</h1>
      <p v-for="(value, key, index) in boss" :key="value">{{key}}:{{value}} -- {{index}}</p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          user: [
            {name: 'jack', age: 12},
            {name: 'rose', age: 13}
          ],
          boss: {
            name: 'mayun',
            age: 1111
          }
        }
      })
    </script>
  </body>
</html>